<% items.each_with_index do |item, index| %>
  <div class="detail-item">
    <div
      data-kind="song"
      data-id="<%= item.id %>"
      data-content_id="<%= item.content_id %>"
      class="detail-item-song <%= "fe-cache" if params[:song_id] && params[:song_id].to_i == item.id %>"
      fe-role="Widget"
      <%= "fe-cfg=default_focus:yes" if params[:song_id] && params[:song_id].to_i == item.id %>
      id="<%= "song#{index}" %>"
    >
      <div class="detail-item-song-wrapper">
        <div class="marquee-truncate overflow-hidden">
          <span class="marquee-content"><%= "#{item[:name]} - #{item[:redundant_singer_name]}" %></span>
        </div>
      </div>
      <div class="detail-item-song-mv">
        <div class="detail-item-song-mv-img"></div>
      </div>
    </div>
    <div data-kind="pick"
         data-id="<%= item.id %>"
         class="detail-item-pick detail-item-icon"
         fe-role="Widget"
    >
      <div class="detail-item-pick-img <%= @picks.include?(item.id) ? "green-minus" : "white-plus" %>"></div>
    </div>
    <div data-kind="fav"
         data-id="<%= item.id %>"
         class="detail-item-fav detail-item-icon"
         fe-role="Widget"
    >
      <div class="detail-item-fav-img <%= @favs.include?(item.id) ? "green-fav" : "white-fav" %>"></div>
    </div>
  </div>
<% end %>
